<template>
	<view class="app-container">
		<view class="logo">
			<text class="text">用户注册</text>
		</view>
		<view class="form">
			<u--form labelPosition="left" :model="form" :rules="rules" ref="form">
				<u-form-item prop="phone" ref="item" class="form-item">
					<u--input placeholderClass="blur-text" color="#fff" prefixIcon="phone-fill" prefixIconStyle="font-size: 22px;color: #01e7e9"
						class="input" placeholder="手机号" v-model="form.phone"></u--input>
				</u-form-item>
				<u-form-item prop="code" ref="item" class="form-item">
					<!-- #ifndef APP-NVUE -->
					<u-input placeholderClass="blur-text" prefixIcon="integral-fill" prefixIconStyle="font-size: 22px;color: #01e7e9" placeholder="验证码"
						color="#fff" class="input" v-model="form.code">
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						<u--input placeholderClass="blur-text" prefixIcon="integral-fill" prefixIconStyle="font-size: 22px;color: #01e7e9"
							placeholder="验证码" color="#fff" class="input" v-model="form.code">
							<!-- #endif -->
							<template slot="suffix">
								<u-code ref="uCode" keepRunning @change="codeChange" seconds="60" changeText="XS后失效">
								</u-code>
								<u-button class="code-btn" @tap="fetchCode" :text="tips" size="mini"></u-button>
							</template>
							<!-- #ifndef APP-NVUE -->
					</u-input>
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					</u--input>
					<!-- #endif -->
				</u-form-item>
				<u-form-item prop="password" ref="item" class="form-item">
					<!-- #ifndef APP-NVUE -->
					<u-input placeholderClass="blur-text" v-model="form.passWord" color="#fff" v-show="showPassword" type="password" class="input"
						prefixIcon="lock-fill" prefixIconStyle="font-size: 22px;color: #01e7e9" placeholder="密码"
						:focus="focus">
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						<u--input placeholderClass="blur-text" v-model="form.passWord" v-show="showPassword" type="password" color="#fff" class="input"
							prefixIcon="lock-fill" prefixIconStyle="font-size: 22px;color: #01e7e9" placeholder="密码"
							:focus="focus">
							<!-- #endif -->
							<template slot="suffix">
								<u-icon @click="showPwd" :name="showPassword ? 'eye-off' : 'eye-fill'" size="22px"
									color="#077377"></u-icon>
							</template>
							<!-- #ifndef APP-NVUE -->
					</u-input>
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					</u--input>
					<!-- #endif -->
					<!-- #ifndef APP-NVUE -->
					<u-input placeholderClass="blur-text" v-model="form.passWord" color="#fff" v-show="!showPassword" type="text" class="input"
						prefixIcon="lock-fill" prefixIconStyle="font-size: 22px;color: #01e7e9" placeholder="密码"
						:focus="focus">
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						<u--input placeholderClass="blur-text" v-model="form.passWord" v-show="!showPassword" type="text" color="#fff" class="input"
							prefixIcon="lock-fill" prefixIconStyle="font-size: 22px;color: #01e7e9" placeholder="密码"
							:focus="focus">
							<!-- #endif -->
							<template slot="suffix">
								<u-icon @click="showPwd" :name="showPassword ? 'eye-off' : 'eye-fill'" size="22px"
									color="#077377"></u-icon>
							</template>
							<!-- #ifndef APP-NVUE -->
					</u-input>
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					</u--input>
					<!-- #endif -->
				</u-form-item>
				<u-form-item prop="okPwd" ref="item" class="form-item">
					<!-- #ifndef APP-NVUE -->
					<u-input placeholderClass="blur-text" v-model="form.okPwd" color="#fff" v-show="showOkPwd" type="password" class="input"
						prefixIcon="lock-fill" prefixIconStyle="font-size: 22px;color: #01e7e9" placeholder="确认密码"
						:focus="focusOk">
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						<u--input placeholderClass="blur-text" v-model="form.okPwd" v-show="showOkPwd" type="password" color="#fff" class="input"
							prefixIcon="lock-fill" prefixIconStyle="font-size: 22px;color: #01e7e9" placeholder="确认密码"
							:focus="focusOk">
							<!-- #endif -->
							<template slot="suffix">
								<u-icon @click="showOkPWD" :name="showOkPwd ? 'eye-off' : 'eye-fill'" size="22px"
									color="#077377"></u-icon>
							</template>
							<!-- #ifndef APP-NVUE -->
					</u-input>
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					</u--input>
					<!-- #endif -->
					<!-- #ifndef APP-NVUE -->
					<u-input placeholderClass="blur-text" v-model="form.okPwd" color="#fff" v-show="!showOkPwd" type="text" class="input"
						prefixIcon="lock-fill" prefixIconStyle="font-size: 22px;color: #01e7e9" placeholder="确认密码"
						:focus="focusOk">
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						<u--input placeholderClass="blur-text" v-model="form.okPwd" v-show="!showOkPwd" type="text" color="#fff" class="input"
							prefixIcon="lock-fill" prefixIconStyle="font-size: 22px;color: #01e7e9" placeholder="确认密码"
							:focus="focusOk">
							<!-- #endif -->
							<template slot="suffix">
								<u-icon @click="showOkPWD" :name="showOkPwd ? 'eye-off' : 'eye-fill'" size="22px"
									color="#077377"></u-icon>
							</template>
							<!-- #ifndef APP-NVUE -->
					</u-input>
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					</u--input>
					<!-- #endif -->
				</u-form-item>
				<u-form-item prop="inviteCode" ref="item" class="form-item">
					<u--input placeholderClass="blur-text" color="#fff" prefixIcon="man-add-fill" prefixIconStyle="font-size: 22px;color: #01e7e9"
						class="input" placeholder="邀请码" v-model="form.inviteCode"></u--input>
				</u-form-item>
				<u-form-item prop="name" ref="item" class="form-item">
					<button :loading="loading" class="login-btn" @click="registered">注 册</button>
				</u-form-item>
			</u--form>
		</view>

	</view>
</template>

<script>
	import {
		register,
		getCode
	} from "@/api/user.js"
	export default {
		data() {
			var vaildPass = (rule, value, callback) => {
				if (value === "") {
					callback(new Error('请输入密码'));
				} else if (value != this.form.passWord) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				form: {
					phone: "",
					password: "",
					code: "",
					inviteCode: "",
					okPwd: ""
				},
				rules: {
					phone: [{
						required: true,
						message: '请输入手机号或邮箱',
						trigger: 'blur'
					}],
					passWord: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					}],
					okPwd: [{
						validator: vaildPass,
						trigger: 'blur'
					}]
				},
				showPassword: true,
				showOkPwd: true,
				focus: false,
				focusOk: false,
				tips: '',
				loading:false,
				timer: null
			}
		},
		methods: {
			showPwd() {
				this.showPassword = !this.showPassword;
				this.focus = true;
				this.$nextTick(() =>{
					this.$refs.form.clearValidate()
				})
			},
			showOkPWD() {
				this.showOkPwd = !this.showOkPwd;
				this.focusOk = true;
				this.$nextTick(() =>{
					this.$refs.form.clearValidate()
				})
			},
			registered() {
				this.loading = true
				let f_query = Object.assign({}, this.form);
				delete f_query.okPwd
				// console.log(f_query);
				this.$refs.form.validate().then(res => {
					register(f_query).then(res => {
						// console.log(res);
						this.loading = false;
						uni.showToast({
							title: "注册成功",
							icon:"none"
						})
						if(this.timer){
							clearTimeout(this.timer)
						}
						this.timer = setTimeout(() => {
							uni.reLaunch({
								url: "/pages/login/index"
							})
						},2000)
					}).catch(res =>{
						this.loading = false;
						// console.log(res);
					})
				}).catch(()=>{
					// console.log(12);
					this.loading = false
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			fetchCode() {
				let isPhone = this.doInput(this.form.phone);
				if (!isPhone) {
					uni.$u.toast('请输入手机号');
					return
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					getCode(this.form.phone).then(res => {
						console.log(1,res);
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 1500);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			// 校验手机号
			doInput(val) {
				var regPhone = (/^(13[0-9]|14[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])\d{8}$/); //手机号码
				if (!regPhone.test(val)) {
					return false;
				} else {
					return true;
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background: url("@/static/image/logo_bg.png") no-repeat;
		background-size: 100% 100%;
	}

	@font-face {
		font-family: SourceHanSansCN-Normal;
		src: url("@/static/SourceHanSansCN-Normal.otf");
	}

	* {
		box-sizing: border-box;
	}

	.app-container {}

	.logo {
		width: 100%;
		padding: 100px 40px 20px;

		.text {
			color: #02ddde;
			font-size: 38px;
			font-weight: bold;
			font-family: SourceHanSansCN-Normal;
			letter-spacing: 4px;
		}
	}


	.form {
		padding: 0px 25px 0;
	}

	.form-item {
		
		.input {
			border: 1px solid #077377 !important;
			.blur-text {
				color: #01e7e9 !important;
			}
			
			.icon-phone {
				font-size: 24px;
				padding-right: 10px;
				margin-right: 10px;
				border-right: 1rpx solid #077377;
			}
		}

		.code-btn {
			height: 25px;
			margin-right: 10px;
			color: #5fe5ed;
			font-size: 15px;
			background-image: linear-gradient(to right, #0b4b58, #0b3139);
			border: 1px solid #5fe5ed;
		}

		.login-btn {
			width: 100%;
			color: #5fe5ed;
			font-family: SourceHanSansCN-Normal;
			background-color: transparent;
			border: 2px solid #5fe5ed;
		}
	}
</style>
